import React,{useState,useEffect,useContext} from "react";
import {withRouter} from "react-router-dom";
import { connect } from 'react-redux';
import PropTypes from "prop-types"
import "./Fortune.scss";
import {findConstellation} from "@/assets/utils/utils";
import {onFn,offFn} from "@/assets/utils/utils";
import {CONSTLLATION} from "@/assets/utils/constant";
import FortuneImg from "./FortuneImg";
import FortuneIndex from "./FortuneIndex";
import Ajax from "@/service/index";
import {NAME_ACTION,set_name_action} from "@/store/actions"
import {AppContext} from "./context/index"

import axios from "axios"

function Fortune(props){

    const CONSTLLATION=useContext(AppContext);
    const {name,setName}=props
    const 
        //d=new Date()
        //[name,setName]=useState(findConstellation(d.getMonth()+1,d.getDate())),
          [details,setSetails]=useState(null),
          [show,setShow]=useState(false),
          [constName]=useState(CONSTLLATION);
    const  hideShowFn=()=>{
        setShow(()=>false)
    }
    useEffect(()=>{
        onFn(document,"click",hideShowFn)
        return ()=>{
           offFn(document,"click",hideShowFn)
        }
    },[])
    useEffect(()=>{

        Ajax.getAll({consName:name}).then(res=>{
            console.log(1);
            setSetails(()=>res);
        })
        //取消请求
       
    },[name])
    const stopPropagation=(event)=>{
        event.stopPropagation();
    }
    return (
        <div className="fortune">
            <div className="select" onClick={(event)=>{stopPropagation(event);setShow(!show)}}>
                <h3>{name}</h3>
                <div className={['down_select',show?'show':''].join(" ")}>
                    <ul>
                        {
                            constName.map(item=>{
                                return (<li key={item.name} onClick={(event)=>{setName(item.name)}}>{item.name}</li>)
                            })
                        }
                    </ul>
                </div>
            </div>
            <FortuneImg name={name} />
            {details&&<FortuneIndex name={name} details={details} />}
            
        </div>
        
    )

}
Fortune.propTypes={
    name:PropTypes.string.isRequired,
    setName:PropTypes.func.isRequired
}

Fortune=withRouter(Fortune)
function mapStateToProps(state){
    console.log(state);
    const {reducer_name}=state
    return {name:reducer_name}
}
function mapDispatchToProps(dispatch){
    return {
        setName:(text)=>{
            dispatch(set_name_action(text))
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Fortune)